<template>
  <el-dialog
    v-model="dialogVisible"
    title="创建新分区"
    width="500px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      @submit.prevent="handleSubmit"
    >
      <el-form-item label="分区名称" prop="zoneName">
        <el-input
          v-model="formData.zoneName"
          placeholder="请输入分区名称"
          maxlength="50"
          show-word-limit
        />
      </el-form-item>
      
      <el-form-item label="分区编码" prop="zoneCode">
        <el-input
          v-model="formData.zoneCode"
          placeholder="请输入分区编码"
          maxlength="30"
          show-word-limit
        />
      </el-form-item>
      
      <el-form-item label="分区类型" prop="zoneType">
        <el-select
          v-model="formData.zoneType"
          placeholder="请选择分区类型"
          style="width: 100%"
        >
          <el-option label="住宅区" value="residential" />
          <el-option label="商业区" value="commercial" />
          <el-option label="办公区" value="office" />
          <el-option label="停车区" value="parking" />
          <el-option label="活动区" value="activity" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="分区颜色" prop="zoneColor">
        <el-color-picker
          v-model="formData.zoneColor"
          show-alpha
          :predefine="predefineColors"
        />
      </el-form-item>
      
      <el-form-item label="分区描述" prop="zoneDescription">
        <el-input
          v-model="formData.zoneDescription"
          type="textarea"
          :rows="3"
          placeholder="请输入分区描述"
          maxlength="200"
          show-word-limit
        />
      </el-form-item>
    </el-form>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitting">
          确定创建
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'

// 定义组件属性
interface Props {
  modelValue: boolean
  communityId?: number
  propertyCompanyId?: number
}

// 定义组件事件
interface Emits {
  (e: 'update:modelValue', value: boolean): void
  (e: 'success', zoneData: ZoneFormData): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 表单数据
interface ZoneFormData {
  zoneName: string
  zoneCode: string
  zoneType: string
  zoneColor: string
  zoneDescription: string
}

const formRef = ref<FormInstance>()
const submitting = ref(false)

const formData = reactive<ZoneFormData>({
  zoneName: '',
  zoneCode: '',
  zoneType: 'residential',
  zoneColor: '#409EFF',
  zoneDescription: ''
})

// 预定义颜色
const predefineColors = [
  '#409EFF',
  '#67C23A',
  '#E6A23C',
  '#F56C6C',
  '#909399',
  '#9C27B0',
  '#FF9800',
  '#4CAF50'
]

// 表单验证规则
const formRules: FormRules = {
  zoneName: [
    { required: true, message: '请输入分区名称', trigger: 'blur' },
    { min: 2, max: 50, message: '分区名称长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  zoneCode: [
    { required: true, message: '请输入分区编码', trigger: 'blur' },
    { pattern: /^[A-Z0-9_]+$/, message: '分区编码只能包含大写字母、数字和下划线', trigger: 'blur' },
    { min: 3, max: 30, message: '分区编码长度在 3 到 30 个字符', trigger: 'blur' }
  ],
  zoneType: [
    { required: true, message: '请选择分区类型', trigger: 'change' }
  ],
  zoneColor: [
    { required: true, message: '请选择分区颜色', trigger: 'change' }
  ]
}

// 对话框显示状态
const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 监听对话框打开，重置表单
watch(() => props.modelValue, (newVal) => {
  if (newVal) {
    resetForm()
  }
})

// 重置表单
const resetForm = () => {
  formData.zoneName = ''
  formData.zoneCode = ''
  formData.zoneType = 'residential'
  formData.zoneColor = '#409EFF'
  formData.zoneDescription = ''
  
  // 清除验证状态
  formRef.value?.clearValidate()
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    submitting.value = true
    
    // 构建分区数据
    const zoneData: ZoneFormData = {
      zoneName: formData.zoneName,
      zoneCode: formData.zoneCode,
      zoneType: formData.zoneType,
      zoneColor: formData.zoneColor,
      zoneDescription: formData.zoneDescription
    }
    
    // 触发成功事件
    emit('success', zoneData)
    
    // 关闭对话框
    dialogVisible.value = false
    
    ElMessage.success('分区信息已确认')
  } catch (error) {
    console.error('表单验证失败:', error)
  } finally {
    submitting.value = false
  }
}

// 取消操作
const handleCancel = () => {
  ElMessage.info('已取消创建分区')
  dialogVisible.value = false
}
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}

:deep(.el-color-picker) {
  width: 100%;
}

:deep(.el-color-picker__trigger) {
  width: 100%;
  height: 40px;
}
</style>
